<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { apiBaseCol } from "assets/js/constant";
import datePickerDemo from "./components/datePickerDemo.vue";
const date = ref("");

const dataSource = reactive([
  {
    name: "v-model",
    param: "string",
    desc: "双向绑定值",
  },
  {
    name: "required",
    param: "boolean",
    desc: "是否必填（只控制样式）",
  },
  {
    name: "label",
    param: "string",
    desc: "标题文字",
  },
  {
    name: "name",
    param: "string",
    desc: "表单提交时的key值",
  },
  {
    name: "rules",
    param: "Array<Object>",
    desc: "校验规则",
  },
]);
</script>
<template>
  <div class="container">
    <div class="left-box">
      <div class="public-flex-box">
        <div class="public-title-bold">介绍</div>
        <div class="public-content-text">选择一个单独的日期</div>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">引入</div>
        <pre class="public-content-code">
				<code>
	import { HxqDatePicker } from "vue-mobile-hxq";
</code>
</pre>
      </div>
      <div class="public-outside-title">代码展示</div>

      <div class="public-flex-box">
        <div class="public-title-bold">普通选择</div>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
	&lt;script setup lang="ts">
		const date = ref("");
	&lt;/script>
        </code></pre>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
        &lt;hxq-date-picker
			name='buildDate'
			label='标题最多六字：'
			v-model='date'
        >&lt;/hxq-date-picker>
      </code></pre>
      </div>

      <div class="public-flex-box">
        <div class="public-title-bold">必填</div>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
	const date = ref('')
        </code></pre>
        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
        &lt;hxq-date-picker
		label='标题'
		reruired
		v-model='date'
		:rules="[{ required: true, message: '请选择日期' }]"
        > &lt;/hxq-date-picker>
      </code></pre>
      </div>

      <div class="public-flex-box">
        <div class="public-title-bold">基本参数</div>
        <a-table
          :dataSource="dataSource"
          :columns="apiBaseCol"
          :pagination="false"
        />
      </div>
    </div>
    <div class="right-box">
      <datePickerDemo></datePickerDemo>
    </div>
  </div>
</template>
<style lang="scss">
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left-box {
    width: calc(72% - 10px);
    height: 100%;
    overflow-y: auto;
  }
  .left-box::-webkit-scrollbar {
    width: 0;
  }
  .right-box {
    width: calc(28% - 10px);
    height: 100%;
    background-color: #fff;
    border-radius: 24px;
  }
}
.van-overlay {
  position: absolute;
}
.van-popup {
  position: absolute;
  width: 100%;
  right: 24px;
}
</style>
